<template>
    <view>
        <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
        <el-form-item label="用户名称" prop="userName">
            <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 200px"
                @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="手机号码" prop="mobile">
            <el-input v-model="queryParams.mobile" placeholder="请输入手机号码" clearable style="width: 200px"
                @keyup.enter="handleQuery" />
        </el-form-item>
       
        <el-form-item>
            <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
            <el-button :icon="Refresh" @click="formReset">重置</el-button>
        </el-form-item>
    </el-form>
    <el-row :gutter="20">
        
        <!--部门数据-->
        <el-col :span="24" :xs="24">
            <el-table v-loading="loading" :data="tableData">

                <el-table-column label="用户编号" align="center" key="id" prop="id" />
                <el-table-column label="账户" width="150" align="center" key="userName" prop="userName"
                    :show-overflow-tooltip="true" />
                <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" :show-overflow-tooltip="true" />
                <el-table-column label="手机号码" align="center" key="mobile" prop="mobile" width="120" />
                <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
                    <template #default="scope">
                        <el-button type="warning" @click="doCancel(scope.row.id)"
                            v-if="hasUser(scope.row.id)">取消授权</el-button>
                        <el-button type="primary" @click="doGrant(scope.row.id)" v-else>授权</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <EleZh>
                <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                    v-model:limit="queryParams.pageSize" @pagination="getList" />
            </EleZh>

        </el-col>
    </el-row>
    </view>
   
</template>
<script setup>
import useApp from '@/hooks';
const { $, proxy } = useApp();
import { queryList } from '@/module/system/api/user';
import { createGrant as createOne, cancelGrant as cancelOne, queryGrant } from "@/custom/pms/api/project";
const loading = ref(false)
const userIds = ref([])
const tableData = ref([])
const total = ref(0)
const queryParams = ref({
    pageNum: 1,
    pageSize: 10,

    userName:'',
    mobile:''
})
const props = defineProps({
    pId: {
        type: [String, Number]
    }
})

function doCancel(userId) {
    cancelOne({
        projectId: props.pId,
        userId: userId
    }).then(res => {
        $.showToast({
            title: '取消成功',
            icon: 'success'
        })
        getUsers()

    })
}
// 授权
function doGrant(userId) {
    createOne({
        projectId: props.pId,
        userId: userId
    }).then(res => {
        $.showToast({
            title: '授权成功',
            icon: 'success'
        })
        getUsers()

    })
}
// 检查函数
function hasUser(userId) {
    return userIds.value.includes(userId) || userIds.value.includes(userId.toString())
}
// 查询
function handleQuery() {
    loading.value = true;
    queryList(queryParams.value).then(response => {
        console.log(response)
        loading.value = false;
        tableData.value = response.content;
        total.value = response.totalElements;

    })
}
// 部门确认

handleQuery();
function getUsers() {
  
    // 执行查询
    queryGrant({
        projectId:props.pId
    }).then(res => {
        let arr = res;
        userIds.value = arr.map(ele => {
            return ele.userId
        })
        console.log(userIds.value)
    })
}
getUsers();

/** 重置按钮操作 */
function resetQuery() {
    proxy.resetForm("queryRef");
    // fix 表单重置
    queryParams.value.deptId = null;
    handleQuery();
}
// 表单重置
function formReset(){
    proxy.resetForm("queryRef");
    resetQuery()
}
</script>